<script setup>
// import Header from "@/components/Header.vue";
import { computed, onMounted, ref } from "vue";
import { mockData1, mockData2 } from "@/api";
import { useTestStore } from '@/stores/test'
const testStore = useTestStore()
import { localStorageHooks } from '@/utils/localStorageHooks'
const { setLocalItem, getLocalItem } = localStorageHooks()
import { commonHook } from '@/utils/commonHooks'
const { calcBaseFontsize } = commonHook()

const unDoneList = ref([
  
  {
    label: "路由(动态渲染) & 权限",
  },
  {
    label: "...",
  },
]);

const doneList = ref([
  {
    label: "修改ICO",
  },
  {
    label: "封装请求",
  },
  {
    label: "本地proxy跨域处理",
  },
  {
    label: "封装自定义hook函数",
  },
  {
    label: "全局参数@",
  },
  {
    label: "使用pinia",
  },
  {
    label: '二次封装localstorage'
  },
  {
    label: '处理响应式'
  },
  {
    label: '常用自定义指令'
  },
  {
    label: '增加简单黑暗模式'
  },
  {
    label: "...",
  }
]);

onMounted(() => {
  getMockData1();
  getMockData2();
  calcBaseFontsize()
  window.addEventListener('resize',()=>{
    calcBaseFontsize()
  })
});

const getMockData1 = async () => {
  const res = await mockData1();
  console.log("xxx1", res);
};

const getMockData2 = async () => {
  const res = await mockData2();
  console.log("xxx2", res);
};

const testSetLocalStorage = () => {
  // setLocalItem('测试数据1',{ name: 'zs', age: '20'},1)
  setLocalItem('测试数据1',{ name: 'zs', age: '20'})
}

const testGetLocalStorage = () => {
  // setlocalItem('测试数据',{ name: 'zs', age: '20'},1)
  const aaa = getLocalItem('测试数据1')
  console.log('data',aaa)
}

</script>

<template>
  <Header></Header>
  <div class="pageWrapper">
    <a href="https://vitejs.dev" target="_blank">
      <img src="@/assets/vue.svg" class="logo" alt="Vite logo" />
    </a>

    <p class="tip">Vue3.2 demo 项目<br />完善中...</p>

    <div class="listArea">
      <div class="listBox">
        <div class="listTitle">待完成</div>
        <div class="listItems">
          <div
            class="listItem"
            v-for="(item, index) of unDoneList"
            :key="index"
            :title="`${item.label}`"
          >
          待完成{{ index + 1 }}：{{ item.label }}
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="listTitle">已完成</div>
        <div class="listItems">
          <div class="listItem" v-for="(item, index) of doneList" :key="index" :title="`${item.label}`">
            已完成{{ index + 1 }}：{{ item.label }}
          </div>
        </div>
      </div>
    </div>

    <!-- <p>count: {{ testStore.count }}</p> -->
    <!-- <button @click="testStore.increment()">+1</button> -->
    <!-- <button @click="testSetLocalStorage" >存入</button>
    <button @click="testGetLocalStorage" >取出</button> -->
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.tip {
  text-align: center;
}

.listArea {
  width: 50vw;
  height: 28.75rem;
  display: flex;
  justify-content: space-around;
}
.listBox {
  width: 17.5rem;
  height: 100%;
  background: linear-gradient(to bottom, #fe7c39, #fd5108, #c52b09);
  border: .0625rem solid #ee3d08;
  border-radius: .75rem;
}

.listTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1.25rem;
  height: 5rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
}
.listItems {
  padding: 0 1.25rem;
  height: 22.5rem;
  white-space: nowrap;
  overflow-y: auto;
}

.listItem {
  color: #fff;
  text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listItem:nth-child(n + 2) {
  margin-top: .625rem;
}
</style>
